<template>
  <div class="roles">
    <el-button type="primary" class="button" @click="addlist">添加角色</el-button>
    <!-- ------------------------------------------------------------- -->
    <Table :data="datalist" :cols="cols">
      <template v-slot:menus="{ row }">
        <div v-for="item in row.children" :key="item.id">
          <el-tag class="mx-1" closable @close="handleClose(row,item)">
            {{ item.authName }}
          </el-tag>
          <div v-for="tags in item.children" :key="tags.id">
            <el-tag type="success" class="mx-1" closable @close="handleClose(row,tags)">
              {{ tags.authName }}
            </el-tag>
            <el-tag type="warning" v-for="tag in tags.children" :key="tag.id" class="mx-1" closable @close="handleClose(row,tag)">
              {{ tag.authName }}
            </el-tag>
          </div>


        </div>


      </template>
      <template v-slot:action="{ row }">
        <el-button type="primary" size="small" @click="updatalist(row)">修改</el-button>
        <el-button type="danger" size="small" @click="delList(row)">删除</el-button>
        <el-button type="warning" size="small" @click="fenpei(row)">分配权限</el-button>
      </template>

    </Table>
    <el-dialog v-model="dialogVisible" width="30%" :title="title">
      <!-- ------------------------------------------------- -->
      <el-form :model="ruleForm" class="demo-model">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName" placeholder="此项必填" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc" />
        </el-form-item>
      </el-form>
      <!-- ------------------------------------------------- -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- --------------------------------------------------------------- -->
    <el-dialog v-model="dialogVisible1" width="40%" title="分配权限">
      <el-tree ref="tree"  :data="treelist" show-checkbox node-key="id" default-expand-all :default-checked-keys="keys"
        :props="{ label: 'authName', children: 'children' }" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="confirm1">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import { getroles, roleslist, updataroleslist, deletelist, gettree ,updatatree,deletetree} from '../../api/Permission'
import Table from '../../components/table.vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { async } from 'q';
export default {
  setup(props) {
    const data = reactive({
      datalist: [],
      keys: [],
      //列
      cols: [
        {
          title: '#',
          type: 'expand',
          slot: 'menus'
        }, {
          title: '名称',
          name: 'roleName'
        }, {
          title: '描述',
          name: 'roleDesc'
        }, {
          title: '操作',
          slot: 'action'
        }
      ],
      // 添加编辑弹框
      dialogVisible: false,
      // 分配角色弹框
      dialogVisible1: false,
      ruleForm: {},
      treelist: []
    });
    onMounted(() => {
      getlist()
    })
    //获取角色列表数据
    const getlist = async () => {
      await getroles().then(res => {
        data.datalist = res.data
        console.log(res.data);
      })
    }
    //点击添加按钮
    const addlist = () => {
      data.ruleForm = {}
      data.dialogVisible = true
    }
    //点击编辑按钮
    const updatalist = (list) => {
      console.log(list);
      data.ruleForm = list
      data.dialogVisible = true
    }
    //点击dialog确定按钮添加数据
    const confirm = () => {
      console.log(data.ruleForm);
      if (data.ruleForm.id) {
        updataroleslist(data.ruleForm)
        getlist();
      } else if (!data.ruleForm.id) {
        roleslist(data.ruleForm)
        getlist();
      }
      data.dialogVisible = false
    }
    const title = computed(() => {
      return data.ruleForm.id ? '修改用户' : '添加用户'
    })
    //点击删除按钮s
    const delList = (row) => {
      ElMessageBox.confirm("你确定要删除本条数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletelist(row.id)
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });

    }
    // 点击分配角色
    const fenpei = async (row) => {
      data.dialogVisible1 = true
      let list = await gettree()
      data.treelist = list.data
      data.keys.splice(0, Infinity)
      function deep(rowlist) {
        // console.log(children);
        if(!rowlist.children){
           return data.keys.push(rowlist.id)
        }
        rowlist.children.forEach(child => {
          return deep(child)
        });
      }
      deep(row)
    }
    const tree=ref("")
    // 点击分配弹框确定按钮
    const confirm1 = async (row) => {
      console.log(row);
      let id=[...tree.value.getCheckedKeys(),tree.value.getHalfCheckedKeys()].join(',')
         await updatatree(id,data.keys)
      data.dialogVisible1 = false
    }
    const handleClose=(row,value)=>{
       ElMessageBox.confirm("你确定要删除本条数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deletetree(row.id,value.id)
           getlist()
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });
         
          
    }
    return {
      ...toRefs(data),
      getlist,
      addlist,
      confirm,
      updatalist,
      title,
      delList,
      fenpei,
      confirm1,
      tree,
      handleClose
    };
  },
  components: { Table }
}
</script>
<style lang="scss" scoped>
.roles {
  padding: 20px 10px;
  background: #fff;
  box-shadow: 1px 1px 30px rgb(151, 146, 146);

  .button {
    margin-left: 30px;
  }
}
</style>
